<script setup lang="ts">
import { Component, computed, ref, toRef, watch } from "vue";
import { IconCode } from "@/views/domain/kubeHud/views/k8s/components/icons";
import PodLogView from "./PodLogView.vue";
import { Container } from "@/views/domain/kubeHud/api/k8s/types";
import { useK8SApi } from "@/views/domain/kubeHud/api/k8s/k8s";

const { podRepo } = useK8SApi();

type Prop = {
  title?: string; // 标题
  btnText?: string; // 按钮文本
  type?: any; // 按钮类型
  size?: any; // 按钮大小
  plain?: boolean; // 按钮是否为朴素按钮
  round?: boolean; // 按钮是否为圆角按钮
  circle?: boolean; // 按钮是否为圆形按钮
  link?: boolean; // 按钮是否为链接按钮
  icon?: string | Component; // 图标
  namespace?: string;
  podName?: string;
  containerName?: string;
  containers?: Container[];
};

const props = defineProps<Prop>();
const emits = defineEmits(["update:yaml"]);
const showDialog = ref(false);
const logView = ref();

const currentContainer = ref<string>(
  props.containerName || props.containers?.[0]?.name
);

const wsUrl = computed(() => {
  return podRepo.getPodLogUrl({
    pod: props.podName,
    namespace: props.namespace,
    container: currentContainer.value,
    follow: true,
    tail: 200
  });
});

const onContainerSelected = (name?: string) => {
  currentContainer.value = name;
};

const onDialogClose = () => {
  showDialog.value = false;
  logView.value?.close();
};
</script>

<template>
  <div class="yaml-dialog">
    <el-dialog
      v-model="showDialog"
      :title="title ?? 'Log'"
      width="80%"
      top="4vh"
      destroy-on-close
      append-to-body
      @close="onDialogClose"
    >
      <template #header>
        <el-space v-if="containers">
          <span>{{ currentContainer }}</span>
          <el-select
            v-model="currentContainer"
            class="f1 min-w-40"
            @change="onContainerSelected"
          >
            <el-option
              v-for="container in containers"
              :key="container.name"
              :label="container.name"
              :value="container.name"
            />
          </el-select>
        </el-space>
        <span v-else-if="containerName">容器: {{ containerName }}</span>
      </template>
      <PodLogView ref="logView" :url="wsUrl" />
    </el-dialog>
    <el-button
      class="dialog-button"
      :type="type"
      :size="size"
      :plain="plain"
      :round="round"
      :circle="circle"
      :icon="icon"
      :link="link"
      @click="showDialog = true"
    />
  </div>
</template>
<style lang="scss" scoped>
.yaml-dialog {
  float: left;
  position: relative;
  margin-right: -1px;
  .dialog-button {
    border-radius: 0;
    border-left-color: var(--el-button-divide-border-color);
    border-right-color: var(--el-button-divide-border-color);
  }

  :deep(.el-dialog) {
    display: flex;
    flex-direction: column;
    height: calc(
      100vh - var(--el-dialog-margin-top) *
        2 - var(--el-dialog-padding-primary) * 2
    );
  }
  :deep(.el-dialog__body) {
    flex: 1;
    overflow: auto;
    // height: calc(100% - var(--el-dialog-padding-primary) * 2) !important;
  }
}
</style>
